<template>
    <show-modal
        :title="title"
        :loading="loading"
        width="580px"
        @cancel="cancel"
        :isCancel="infoForm.id ? true : false"
        :isReset="!infoForm.id"
        @reset="reset"
        :isSure="!isDisabled"
        @submit="submit"
    >
        <a-form-model ref="infoForm" :model="infoForm" :rules="rules" v-bind="layout">
            <a-form-model-item label="头像">
                <upload-avatar
                    type="labour"
                    :url="infoForm.imageUrl"
                    :id="infoForm.id"
                    @upload="uploadImage"
                    @delete="deleteAvatar"
                />
            </a-form-model-item>
            <a-form-model-item label="姓名" prop="name">
                <a-input v-model.trim="infoForm.name" :maxLength="20" :disabled="isDisabled" placeholder="请输入姓名" />
            </a-form-model-item>
            <a-form-model-item label="人员编码" prop="code">
                <a-input
                    v-model.trim="infoForm.code"
                    :maxLength="20"
                    :disabled="isDisabled"
                    placeholder="请输人员编码"
                />
            </a-form-model-item>
            <a-form-model-item label="性别" prop="sex">
                <a-select v-model="infoForm.sex" placeholder="请选择性别">
                    <a-select-option value="男">男</a-select-option>
                    <a-select-option value="女">女</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="身份证号" prop="idNumber">
                <a-input
                    v-model.trim="infoForm.idNumber"
                    @blur="idCardEnd"
                    :maxLength="20"
                    :disabled="isDisabled"
                    placeholder="请填写身份证号"
                />
            </a-form-model-item>
            <a-form-model-item label="年龄" prop="age">
                <a-input v-model.trim="infoForm.age" :disabled="true" placeholder="请填写身份证号" />
            </a-form-model-item>
            <a-form-model-item label="籍贯" prop="nativeLocation">
                <a-input v-model.trim="infoForm.nativeLocation" :disabled="true" placeholder="请填写身份证号" />
            </a-form-model-item>
            <a-form-model-item label="联系方式" prop="contact">
                <a-input v-model.trim="infoForm.contact" placeholder="请填写联系方式" />
            </a-form-model-item>
            <a-form-model-item label="邮箱">
                <a-input v-model.trim="infoForm.email" placeholder="请填写邮箱" />
            </a-form-model-item>
            <a-form-model-item label="紧急联系人" prop="emergencyContact">
                <a-input v-model.trim="infoForm.emergencyContact" placeholder="请填写紧急联系人" />
            </a-form-model-item>
            <a-form-model-item label="通讯地址" prop="address">
                <a-input v-model.trim="infoForm.address" placeholder="请填写通讯地址" />
            </a-form-model-item>
            <a-form-model-item label="当前岗位" prop="position">
                <a-input v-model.trim="infoForm.position" placeholder="请填写当前岗位" />
            </a-form-model-item>
            <a-form-model-item label="入职时间" prop="entryTime">
                <a-date-picker
                    v-model="infoForm.entryTime"
                    :allowClear="false"
                    class="form_item"
                    valueFormat="YYYY-MM-DD"
                    placeholder="请选择入职时间"
                />
            </a-form-model-item>
            <a-form-model-item label="所属项目部" prop="deptId">
                <a-tree-select
                    v-model="infoForm.deptId"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                    :tree-data="deptList"
                    :replaceFields="{ children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }"
                    placeholder="请选择部门"
                >
                </a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="工种" prop="workType">
                <a-select v-model="infoForm.workType" :disabled="isDisabled" showSearch mode="multiple" placeholder="请选择">
                    <a-select-option :value="item.value" v-for="item in workTypes" :key="item.value">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="状态" prop="status">
                <a-select v-model="infoForm.status" :disabled="isDisabled" showSearch placeholder="请选择">
                    <a-select-option :value="item.value" v-for="item in jobStatus" :key="item.value">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="评级">
                <a-select v-model="infoForm.level" :disabled="isDisabled" showSearch allowClear placeholder="请选择">
                    <a-select-option :value="item.value" v-for="item in jobLevels" :key="item.value">{{
                        item.label
                    }}</a-select-option>
                </a-select>
            </a-form-model-item>
            
            <a-form-model-item label="是否投保" prop="insureStatus">
                <a-switch
                    :checked="infoForm.insureStatus == 1? true : false"
                    checked-children="是"
                    un-checked-children="否"
                    :disabled="isDisabled"
                    @change="changeInsureStatus"/>
            </a-form-model-item>

            <a-form-model-item label="相关证书">
                <upload-picture
                    :list="infoForm.certificate"
                    @upload="e => uploadImages(e)"
                    @delete="e => deleteFile(e)"
                    :disabled="isDisabled"
                    :max="50"
                />
            </a-form-model-item>
            <a-form-model-item label="证书检查日期" v-if="infoForm.certificate.length">
                <a-date-picker
                    v-model="infoForm.certificateExpireDate"
                    :allowClear="true"
                    class="form_item"
                    valueFormat="YYYY-MM-DD"
                    placeholder="请选择证书检查日期"
                />
            </a-form-model-item>
            <a-form-model-item label="备注" prop="comments">
                <a-textarea placeholder="请输入备注（最多200字）" :max-length="200" v-model="infoForm.comments" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>
<script>
import { rules } from './rules';
import form from '@/mixins/form';
import UploadAvatar from '@/components/uploadAvatar';
import { workTypes, jobStatus,insureStatus, jobLevels, provinces } from '@/views/staff/dictionary';
import { addInfo, updateInfo } from '@/api/staff/labour';
import { analyzeIDCard } from '@/utils/idcard';
import UploadPicture from '@/components/uploadPicture';
import { deepClone } from '@/utils';

export default {
    name: 'TunnelInfo',
    mixins: [form],
    components: {
        UploadAvatar,
        UploadPicture
    },
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        deptList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        let originForm = {
            name: '',
            imageUrl: '',
            code: '',
            sex: undefined,
            idNumber: '',
            age: '',
            nativeLocation: '',
            entryTime: undefined,
            deptId: undefined,
            workType: undefined,
            status: undefined,
            level: undefined,
            certificateExpireDate:'',
            comments: '',
            contact: '',
            emergencyContact: '',
            position: '',
            insureStatus:1,
            address: '',
            certificate: []
        };
        return {
            workTypes,
            jobStatus,
            jobLevels,
            provinces,
            insureStatus,
            title: '人员信息',
            acceptType: 'image/*',
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            },
            originForm,
            rules,
            loading: false,
            infoForm: {
                ...originForm
            }
        };
    },
    computed: {
        isDisabled() {
            return this.type == 'detail';
        }
    },
    created() {
        this.infoForm = { ...this.infoForm, ...this.info };
        let { certificate = '' } = this.info;
        this.infoForm.certificate = certificate ? certificate.split(',') : [];
    },
    methods: {
        //切换投保状态
        changeInsureStatus(e){
            this.infoForm.insureStatus = e?1:0;
        },
        //提交
        submit() {
            this.$refs.infoForm.validate(async valid => {
                if (valid) {
                    try {
                        let form = deepClone(this.infoForm);
                        this.loading = true;
                        let res = null;
                        if (form.certificate) {
                            form.certificate = form.certificate.join(',');
                        }
                        if(!form.level){
                            form.level = ''
                        }
                        if (form.id) {
                            //编辑
                            res = await updateInfo(form);
                        } else {
                            //新增
                            res = await addInfo(form);
                        }
                        if (res.code == 200) {
                            this.$message.success('操作成功!');
                            this.$emit('submit');
                        } else {
                            this.$message.error(res.message);
                        }
                    } finally {
                        this.loading = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //上传证书
        uploadImages(e) {
            this.infoForm.certificate.push(e);
        },
        //删除证书
        deleteFile(index) {
            this.infoForm.certificate.splice(index, 1);
        },
        //身份证结束
        idCardEnd() {
            let { idNumber } = this.infoForm;
            let age = analyzeIDCard(idNumber);
            let province = this.getOriginBirth(idNumber);
            this.infoForm.nativeLocation = province;
            this.infoForm.age = age;
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        uploadImage(e) {
            this.infoForm.imageUrl = e;
            this.$refs.infoForm.validateField(['imageUrl']);
        },
        getOriginBirth(idCard) {
            let provinces = this.provinces;
            let province = provinces[parseInt(idCard.substr(0, 2))];
            return province;
        },
        deleteAvatar() {
            this.infoForm.imageUrl = '';
        }
    }
};
</script>
